<template>
	<view class="mainPage" style="padding-top: 0">
		<view class="padding">
			<view class="status-text text-red" v-if="info.order_status === 3 && timeValue">
				请在<text style="font-size: 48rpx">{{ timeValue }}</text>内完成服务
			</view>
			<view v-if="false" class="progress bg-white margin-top radius-xl padding-sm margin-bottom">
				<view class="item themeColor" :style="{ opacity: info.order_status >= 1 ? 1 : 0.5}">
					<view class="image">
						<image src="@/static/image/order/order_accept.png" mode=""></image>
						<text class="text-sm">客服接单</text>
					</view>
				</view>
        <view class="item themeColor" :style="{ opacity: info.order_status >= 1 ? 1 : 0.5}">
					<view class="image">
						<image src="@/static/image/order/order_go.png" mode=""></image>
						<text class="text-sm">客服出发</text>
					</view>
				</view>
        <view class="item themeColor" :style="{ opacity: info.order_status >= 2 ? 1 : 0.5}">
					<view class="image">
						<image src="@/static/image/order/order_arrive.png" mode=""></image>
						<text class="text-sm">客服到达</text>
					</view>
				</view>
        <view class="item themeColor" :style="{ opacity: info.order_status >= 3 ? 1 : 0.5}">
					<view class="image">
						<image src="@/static/image/order/order_start.png" mode=""></image>
						<text class="text-sm">开始服务</text>
					</view>
				</view>
        <view class="item themeColor" :style="{ opacity: info.order_status >= 4 ? 1 : 0.5}">
					<view class="image">
						<image src="@/static/image/order/order_end.png" mode=""></image>
						<text class="text-sm">服务完成</text>
					</view>
				</view>
			</view>

      <view class="address radius-xl padding-sm bg-white margin-bottom">
        <view class="icon">
          <image src="@/static/image/order/location.png" mode=""></image>
        </view>
        <view class="info margin-left-sm" v-if="info.address.address">
          <view>
            <text class="text-black">{{info.address.nickname}}</text>
            <text class="padding-left-sm">{{info.address.phone}}</text>
            <text class="padding-left-sm" style="color: #007aff" @click="copyValue(info.address.phone, '手机号')">复制</text>
          </view>
          <view>
            <text class="gray text-sm">{{info.address.address + info.address.code}}</text>
            <text class="padding-left-sm" style="color: #007aff" @click="copyValue(info.address.address + info.address.code, '地址')">复制</text>
          </view>
        </view>
      </view>
			<!-- 预约项目 -->
			<view class="project-list padding-sm radius-xl bg-white margin-bottom-sm">
				<view class="solid-bottom">
					<view class="title">
						<text class="cuIcon-titles themeColor"></text>预约项目
					</view>
					<view class="project padding-tb-sm" v-for="(item,index) in info.orderDetails" :key="index">
						<image :src="item.good.image" mode="" class="image"></image>
						<view class="proBox padding-left-sm">
							<view class="nameandtime">
								<view class="name text-bold text-black">{{item.good.name}}</view>
								<view class="time text-gray text-sm">{{item.good.duration}}分钟</view>
							</view>
							<view class="desc text-sm text-gray margin-bottom-sm">{{item.good.desc}}</view>
							<view class="cost">
								<view class="text-red text-bold">￥{{ getPrice(item.good.price)}}</view>
								<view class="num text-gray">x{{item.count}}</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 延长服务 -->
				<view v-if="info.extendOrder && info.extendOrder.length > 0">
					<view class="addOrder padding-top-xs">
						<text class="cuIcon-titles themeColor"></text>延长项目
					</view>
					<view v-for="(item,index) in info.extendOrder" :key="index">
						<view class="project padding-tb-sm" v-for="(items,indexs) in item.projects" :key="indexs">
							<image :src="items.image.preview_url" mode="" class="image"></image>
							<view class="proBox padding-left-sm">
								<view class="nameandtime">
									<view class="name text-bold text-black">{{items.name}}</view>
									<view class="time text-gray text-sm">{{items.serve_hours}}分钟</view>
								</view>
								<view class="desc text-sm text-gray margin-bottom-sm">{{items.desc}}</view>
								<view class="cost">
									<view class="text-red text-bold">￥{{items.money}}</view>
									<view class="num text-gray">x{{items.num}}</view>
								</view>
							</view>
						</view>
					</view>

				</view>

<!--				<view class="crow margin-bottom-xs padding-top-sm">-->
<!--					<view class="name"></view>-->
<!--					<view class="content">-->
<!--            <button v-if="info.buttonShow.pay" class="cu-btn china-btn-bg round margin-left-xs" style="margin-right: 5px" @click.stop="topay(item)">立即支付</button>-->
<!--            <button v-if="info.buttonShow.cancel" class="cu-btn china-btn-bg sphere round" @click.stop="toCancel(item)">取消订单</button>-->
<!--            <button v-if="info.buttonShow.delete" class="cu-btn lines-gray sphere round" @click.stop="toDel(item)">删除订单</button>-->
<!--            <button v-if="info.buttonShow.refund" class="cu-btn china-btn-bg round margin-left-xs" @click.stop="toUrl('/pages/order/refund?orderId='+item.id,true)">申请退款</button>-->
<!--            <button v-if="info.buttonShow.comment" class="cu-btn lines-orange sphere round" @click.stop="toUrl('/pages/order/comment?orderId='+item.id,true)">订单评价</button>-->

<!--          </view>-->
<!--				</view>-->
			</view>

			<!-- 订单明细 -->
			<view class="orderInfo padding-sm radius-xl bg-white margin-bottom">
				<view class="title margin-bottom-sm">
					<text class="cuIcon-titles themeColor"></text>订单明细
				</view>
<!--				<view class="crow margin-bottom-sm text-sm">-->
<!--					<view class="name">项目金额</view>-->
<!--					<view class="content">-->
<!--						<text class="text-bold">¥ {{info.pay_amount - info.travel_mode_fee }}</text>-->
<!--					</view>-->
<!--				</view>-->
<!--				<view class="crow margin-bottom-sm text-sm">-->
<!--					<view class="name">延长金额</view>-->
<!--					<view class="content">-->
<!--						<text class="text-bold">¥ 889.90</text>-->
<!--					</view>-->
<!--				</view>-->
<!--				<view class="crow margin-bottom-sm text-sm">-->
<!--					<view class="name">出行费用</view>-->
<!--					<view class="content">-->
<!--						<text class="text-bold">¥ {{ info.travel_mode_fee}}</text>-->
<!--					</view>-->
<!--				</view>-->
<!--				<view class="crow margin-bottom-sm text-sm">-->
<!--					<view class="name">车费详情</view>-->
<!--					<view class="content">-->
<!--						<text class="text-bold">{{ info.travel_mode_name}}</text>-->
<!--						<text class="padding-left-xs">全程{{ info.totalkm || 0 }}km</text>-->
<!--					</view>-->
<!--				</view>-->
				<view class="crow margin-bottom-sm text-sm">
					<view class="name">支付方式</view>
					<view class="content payType">
						<image src="@/static/image/order/wepay.png" mode="" class="payTypeImg"></image>
					</view>
				</view>
<!--				<view class="crow margin-bottom-sm text-sm" v-if="info.coupon_id > 0">-->
<!--					<view class="name">优惠金额</view>-->
<!--					<view class="content">-->
<!--						<text class="text-red text-bold">- ¥ {{info.coupon_money}}</text>-->
<!--					</view>-->
<!--				</view>-->
<!--				<view class="crow margin-bottom-sm text-sm">-->
<!--					<view class="name text-bold">支付金额</view>-->
<!--					<view class="content">-->
<!--						<text class="text-red text-bold">¥ {{info.pay_amount}}</text>-->
<!--					</view>-->
<!--				</view>-->
			</view>

			<!-- 订单详情 -->
			<view class="orderInfo padding-sm radius-xl bg-white">
				<view class="title margin-bottom-sm">
					<text class="cuIcon-titles themeColor"></text>订单信息
				</view>
<!--				<view class="crow margin-bottom-sm text-sm">-->
<!--					<view class="name">服务客服</view>-->
<!--					<view class="content" v-if="info.staff">-->
<!--						<view class="cu-avatar sm round margin-left" :style="{backgroundImage: 'url('+info.staff.avatar+')'}"></view>-->
<!--						<text class="padding-left-xs text-bold">{{info.staff.nickname}}</text>-->
<!--					</view>-->
<!--				</view>-->
				<view class="crow margin-bottom-sm text-sm">
					<view class="name">订单编号</view>
					<view class="content">
						<text class="text-bold">{{info.order_no}}</text>
            <text class="padding-left-sm" style="color: #007aff" @click="copyValue(info.order_no, '订单号')">复制</text>
					</view>
				</view>
				<view class="crow margin-bottom-sm text-sm">
					<view class="name">预约时间</view>
					<view class="content">
						<text class="text-bold">{{info.start_time}}</text>
					</view>
				</view>
        <view v-if="info.order_status === 4" class="crow margin-bottom-sm text-sm">
          <view class="name">开始时间</view>
          <view class="content">
            <text class="text-bold">{{info.serve_time}}</text>
          </view>
        </view>
        <view v-if="info.order_status === 4" class="crow margin-bottom-sm text-sm">
          <view class="name">完成时间</view>
          <view class="content">
            <text class="text-bold">{{info.serve_end_time}}</text>
          </view>
        </view>

				<view class="crow margin-bottom-sm text-sm">
					<view class="name">订单备注</view>
					<view class="content">
						<text class="text-bold">{{info.remark}}</text>
					</view>
				</view>
			</view>
      <button v-if="info.order_status === 2" class="cu-btn lg china-btn-bg round margin-left-xs" style="margin-top: 40rpx;width: 100%;padding: 0 16px" @click="toget(3)">开始服务</button>
      <button v-if="info.order_status === 3" class="cu-btn lg china-btn-bg round margin-left-xs" style="margin-top: 40rpx;width: 100%" @click="toget(4)">结束服务</button>

		</view>

		<addOrder :show="addOrderShow" :orderId="info.order_id" @addOrderPopup="addOrderPopup"/>

		<Loading v-if="pageLoading"/>
	</view>
</template>

<script>
	import addOrder from './modules/addOrder.vue'; // 延长服务
  import dayjs from "dayjs";
	export default {
		components:{addOrder},
		data() {
			return {
				pageLoading:false,
				info: {
          address: {},
          orderDetails: []
        },
				addOrderShow:false,
        timeValue: null,
        task:null,
        userInfo: {}
			};
		},
		onLoad(options) {
      if (this.task) {
        clearInterval(this.task)
        this.task = null
      }
			this.pageLoading = true;
      this.getDetail(options.orderId)
		},
		methods:{
      getPrice(price) {
        let settlement_ratio = this.userInfo.settlement_ratio || 100
        let _settlement_ratio = settlement_ratio / 100
        return (price * _settlement_ratio).toFixed(2)
      },
      getDetail(orderId) {
        this.$http.getOrderDetail({
          id: orderId || this.info.id
        }).then(res => {
          this.info = {
            ...res,
            address: JSON.parse(res.address),
          };
          this.userInfo = this.info.member || {}
          if (this.info.order_status === 3) {
            this.task = setInterval(() => {
              // 项目总时长分钟
              const total = this.info.orderDetails.reduce((prev, next) => {
                return prev + next.good.duration * next.count;
              }, 0);
              // 服务开始时间 serve_time，服务时长 total 距离当前时间还剩余多少
              const serve_time = new Date(this.info.serve_time).getTime()
              const end_time = serve_time + total * 60 * 1000
              // 计算当前时间距离结束时间还剩余多少分多少秒
              const now = new Date().getTime()
              const diff = end_time - now
              // 计算分、秒
              const minute = Math.floor(diff / 1000 / 60)
              const second = Math.floor(diff / 1000 % 60)
              this.timeValue = `${minute}分${second}秒`
              if (diff <= 0) {
                clearInterval(this.task)
                this.task = null
              }
            }, 1000)

          } else {
            clearInterval(this.task)
            this.task = null
          }
          this.pageLoading = false;
        })
      },
      toget(order_status) {
        let that = this
        // 确认对话框
        uni.showModal({
          title: '提示',
          content: '确定要进行此操作吗？',
          success: (res) => {
            if (res.confirm) {
              that.pageLoading = true;
              that.$http.updateOrder({
                id: that.info.id,
                order_status,
              }).then(res => {
                that.getDetail()
              }).finally(() => {
                that.pageLoading = false;
              })
            }
          }
        });
      },
      copyValue(value, type) {
        uni.setClipboardData({
          data: value,
          success: function () {
            uni.showToast({
              title: type + '已复制',
              icon: 'none'
            });
          }
        });
      },
			endOrder(){
				this.pageLoading = true;
			},
			addOrderPopup(e){
				this.addOrderShow = false;
			}
		}
	}
</script>

<style lang="less" scoped>
.progress{
	display: flex;
	justify-content: space-between;
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.image{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			image{
				width: 45upx;
				height: 45upx;
				margin-bottom: 10upx;
			}
		}

	}
}
.address{
	display: flex;
	align-items: center;
	.icon{
		image{
			width: 44upx;
			height: 44upx;
		}

	}
}
.project-list{
	.project{
		display: flex;
		.image{
			width: 130upx;
			height: 130upx;
			border-radius: 20upx;
		}
		.proBox{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.nameandtime,.cost{
				display: flex;
				justify-content: space-between;
			}
		}
	}
}
.crow{
	justify-content:space-between
}
.step{
	display: flex;
	justify-content: flex-start;
	.content{
		margin-left:20upx
	}
}
.payType{
	display: flex;
	align-items: center;
	.payTypeImg{
		width: 40upx;
		height: 40upx;
	}
}
</style>
